<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrderInfoApi } from '@/apis/order'
import { parseTime } from '@/utils/dayJs'
import type { OrderInfoType } from '@/apis/components/orderType'
import { SuccessFilled } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 订单详情
const orderInfo = ref<OrderInfoType>()
// 倒计时
const time = ref(0)
// 订单id
const orderId = ref(route.params.id)
// 跳转支付
// 携带订单id以及回调地址跳转到支付地址（get）
// 支付地址
const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net'
const backURL = 'http://localhost:5173/paycallback'
const redirectUrl = encodeURIComponent(backURL)
const payUrl = `${baseURL}/pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`

// 获取订单详情
const getOrderInfo = async () => {
  const res = await getOrderInfoApi(String(orderId.value))
  orderInfo.value = res.data.result

  // 在获取到订单信息后再计算倒计时
  time.value = parseTime(orderInfo.value.createTime, orderInfo.value.payLatestTime)
  if (time.value !== 0) {
    countDown()
  }
}

// 倒计时
const countDown = () => {
  let timer: number = 0
  timer = setInterval(() => {
    time.value--
    if (time.value === 0) {
      clearInterval(timer)
      timer = 0
      router.replace('/checkout')
    }
  }, 1000)
}

onMounted(async () => {
  await getOrderInfo()
})

// 应付金额
const totalMoney = computed(
  () => Number(orderInfo.value?.totalMoney ?? 0) + Number(orderInfo.value?.postFee ?? 0),
)
</script>

<template>
  <div class="box">
    <div class="payInfo">
      <div class="order-box">
        <el-icon class="icon" size="60"><SuccessFilled /></el-icon>
        <div class="order-text">
          <div class="p1">订单提交成功！请尽快完成支付</div>
          <div class="p2">
            支付还剩<span>{{ Math.floor(time / 60) }} </span>分{{ time % 60 }}
            秒,超时后将取消订单
          </div>
        </div>
      </div>
      <p class="total">
        应付总额:<span>￥{{ totalMoney.toFixed(2) }}</span>
      </p>
    </div>
    <div class="payWay">
      <p class="changeP">选择以下支付方式付款</p>
      <div class="pay1">
        <p>支付平台</p>
        <div class="pay1-box">
          <div class="wx"></div>
          <div class="zfb" @click="router.push(payUrl)"></div>
        </div>
      </div>
      <div class="pay2">
        <p>银行卡支付</p>
        <div>
          <p>招商银行</p>
          <p>工商银行</p>
          <p>建设银行</p>
          <p>农业银行</p>
          <p>交通银行</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 1100px;
  margin: 20px auto;
  .payInfo {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.146);
    .order-box {
      width: 400px;
      height: 60px;
      text-align: center;
      line-height: 130px;
      display: flex;
      .icon {
        margin-left: 20px;
        color: #1ec779;
      }
      .order-text {
        width: 250px;
        height: 60px;
        padding-right: 10px;
        .p1 {
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
        }
        .p2 {
          width: 100%;
          height: 30px;
          line-height: 20px;
          font-size: 13px;
          color: rgba(12, 12, 12, 0.365);
        }
      }
    }
    .total {
      width: 200px;
      height: 100%;
      line-height: 150px;
      text-align: center;
      span {
        font-size: 18px;
        color: red;
      }
    }
  }
  .payWay {
    width: 100%;
    height: 430px;
    margin-top: 20px;
    border: 1px solid rgba(0, 0, 0, 0.146);
    .changeP {
      width: 94%;
      height: 50px;
      margin: 20px 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.146);
    }
    .pay1 {
      width: 500px;
      height: 150px;
      p {
        width: 200px;
        height: 20px;
        margin: 20px 20px;
      }
      .pay1-box {
        width: 350px;
        height: 100px;
        margin-left: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        div {
          width: 150px;
          height: 50px;

          border: 1px solid rgba(0, 0, 0, 0.146);
          cursor: pointer;
          &:hover {
            border: 1px solid rgba(46, 202, 189, 0.493);
          }
        }
        .wx {
          background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg)
            no-repeat center / contain;
        }
        .zfb {
          background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png)
            no-repeat center / contain;
        }
      }
    }
    .pay2 {
      width: 700px;
      height: 150px;
      p {
        width: 200px;
        height: 20px;
        margin: 20px 20px;
      }
      div {
        width: 700px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        p {
          width: 130px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border: 1px solid rgba(0, 0, 0, 0.146);
          cursor: pointer;
          &:hover {
            border: 1px solid rgba(46, 202, 189, 0.493);
          }
        }
      }
    }
  }
}
</style>
